Automatic Image Slider jQuery

En Sohtanaka he visto un slider que me ha gustado, se trata de Automatic Image Slider jQuery y como bien puede apreciarse está creado con jQuery.

La aplicación consiste en utilizar HTML /CSS /Javascript el efecto sería el siguiente

No es complicado, sólo requiere dedicarle un mínimo de tiempo y atención, nos situamos justo antes de </head> y añadimos:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Justo después añadimos también el contenido de este archivo.
Los estilos del slider los añadimos justo antes de ]]></b:skin>

/*--Main Container--*/

.main_view {

float: left;

position: relative;

}

/*--Window/Masking Styles--*/

.window {

height:286px; width: 790px;

overflow: hidden; /*--Hides anything outside of the set width/height--*/

position: relative;

}

.image_reel {

position: absolute;

top: 0; left: 0;

}

.image_reel img {float: left;}

/*--Paging Styles--*/

.paging {

position: absolute;

bottom: 40px; right: -7px;

width: 178px; height:47px;

z-index: 100; /*--Assures the paging stays on the top layer--*/

text-align: center;

line-height: 40px;

background: url(url-imagen) no-repeat; /*--aquí va la imagen de la paginación--*/

display: none; /*--Hidden by default, will be later shown with jQuery--*/

}

.paging a {

padding: 5px;

text-decoration: none;

color: #fff;

}

.paging a.active {

font-weight: bold;

background: #920000;

border: 1px solid #610000;

-moz-border-radius: 3px;

-khtml-border-radius: 3px;

-webkit-border-radius: 3px;

}

.paging a:hover {

font-weight: bold;

}

Por último en un gadget de HTML incluimos el código que contiene las imágenes.

<div class="main_view">

<div class="window">

<div class="image_reel">

<a href="url-enlace-1"><img src="url-imagen-1" alt="" /></a>

<a href="url-enlace-2"><img src="url-imagen-2" alt="" /></a>

<a href="url-enlace-3"><img src="url-imagen-3" alt="" /></a>

<a href="url-enlace-4"><img src="url-imagen-4" alt="" /></a>

</div>

</div>

<div class="paging">

<a href="#" rel="1">1</a>

<a href="#" rel="2">2</a>

<a href="#" rel="3">3</a>

<a href="#" rel="4">4</a>

</div>

</div>

- En la parte superior donde dice url-enlace-1- 2- 3- 4 es el espacio donde podemos añadir la url si deseamos que al pulsar sobre la imagen nos dirija a otro sitio.
- De no desear un enlace dejamos sólo el código para imagen es decir, en lugar de:

<a href="url-enlace-1"><img src="url-imagen-1" alt="" /></a>

bastaría con <img src="url-imagen-1" alt="" />

- Donde dice url-imagen-1- 2- 3- 4 lo sustituimos por la url de cada imagen.
- Para añadir el slider sin necesidad de modificar las medidas lo ideal son imágenes de 790 X 296.-
- En los estilos donde dice: background: url(url-imagen-) no-repeat; /*--aquí va la imagen de la paginación--*/ es el lugar destinado para añadir una imagen de fondo en la paginación.
- Si no deseamos una imagen podemos sustituirla por color background-color:#000; o añadirle esquinas redondeadas como hicimos en otras ocasiones con border-radius
Ver ejemplo: